<template>
  <div>
    <div class="toolbar">
      <el-form :inline="true" :model="q" ref="saveChn" size="mini" label-width="90px">
      <el-form-item label="收款ID">
        <el-input v-model="q.id" placeholder="请输入收款ID"></el-input>
      </el-form-item>
      <el-form-item label="账号名称">
        <el-input v-model="q.receipt_name" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item label="所属总代:">
          <el-select v-model="q.parent_id" clearable filterable placeholder="请输入所属总代">
            <el-option v-for="item of AgencyMainList" :key="item.id" :label="item.id+'>'+item.user_name+'>'+item.nickname"
              :value="item.id" ></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="所属子代:">
          <el-select v-model="q.agency_id" clearable filterable placeholder="请输入代理账号">
            <el-option v-for="item of AgencyList" :key="item.id" :label="item.id+'>'+item.user_name+'>'+item.nickname"
              :value="item.id" ></el-option>
          </el-select>
      </el-form-item>
        <el-form-item label="收款方式:">
          <el-select v-model="q.receipt_type" clearable placeholder="请选择">
            <el-option label="所有" :value=null></el-option>
            <el-option
              v-for="(type,index) of RecepiptType"
              :key="index"
              :label="type.name"
              :value="parseInt(type.id)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账号类型:">
          <el-select :disabled="!q.receipt_type" clearable v-model="q.receipt_method" placeholder="请选择">
            <el-option label="所有" :value=null></el-option>
            <el-option
              v-for="(type, index) of getRecepiptMethodType()"
              :key="index"
              :label="type.name"
              :value="parseInt(type.id)"
              clearable
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付类型:">
          <el-select v-model="q.pay_types" clearable multiple placeholder="请选择">
            <el-option label="所有" :value=null></el-option>
            <el-option
              v-for="(type, index) of payType"
              :key="index"
              :label="type"
              :value="parseInt(index)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="展示条件:">
            <el-select v-model="q.min_user_level" clearable placeholder="请选择">
                <el-option
                        v-for="(type, index) of UserLevel"
                        :key="index"
                        :label="type"
                        :value="index"
                ></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="自助状态:">
          <el-select v-model="q.auto_arrival" clearable placeholder="请选择">
            <el-option label="所有" :value=null></el-option>
            <el-option :key="true" label="启用" :value="true"></el-option>
            <el-option :key="false" label="禁用" :value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="账号状态:">
            <el-select clearable v-model="q.status" placeholder="请选择">
                <el-option :key="true" label="启用" :value="true"></el-option>
                <el-option :key="false" label="禁用" :value="false"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="限额状态:">
          <el-select clearable v-model="q.reached_daily_limit" placeholder="请选择">
            <el-option :key="true" label="已达成" :value="true"></el-option>
            <el-option :key="false" label="未达成" :value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="可用状态:">
          <el-select clearable v-model="q.available" placeholder="请选择">
            <el-option :key="true" label="可用" :value="true"></el-option>
            <el-option :key="false" label="不可用" :value="false"></el-option>
          </el-select>
        </el-form-item>

        <!-- <el-form-item prop="min_accumulated_recharge" label="最小历史累积充值:">
          <el-input
            type="number"
            v-model.number="q.min_accumulated_recharge"
            placeholder="最小历史累积充值"
            prefix-icon="el-icon-edit"
          ></el-input>
        </el-form-item>
        <el-form-item prop="max_accumulated_recharge" label="最大历史累积充值:">
          <el-input
            type="number"
            v-model.number="q.max_accumulated_recharge"
            placeholder="最大历史累积充值"
            prefix-icon="el-icon-edit"
          ></el-input>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
          <el-button type="danger" @click="reload">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-table
      :data="listData.items"
      v-loading.body="listLoading"
      @sort-change="sortlist"
      size="mini"
      stripe
      border
      fit
      highlight-current-row
    >
      <el-table-column prop="id" label="收款ID" width="90"></el-table-column>
      <el-table-column prop="agencyName" label="所属子代" min-width="120">
        <template slot-scope="scope">{{scope.row.agency.user_name}}</template>
      </el-table-column>
      <el-table-column prop="pay_method" label="收款方式" min-width="100">
        <template slot-scope="scope">{{RecepiptType.find((n)=>n.id===scope.row.receipt_type).name}}</template>
      </el-table-column>
      <el-table-column prop="receipt_method" label="账号类型" min-width="110">
        <template slot-scope="scope">{{RecepiptType.find((n)=>n.id===scope.row.receipt_type).children.find((n)=>n.id===scope.row.receipt_method).name}}</template>
      </el-table-column>
      <el-table-column label="账号名称" min-width="120">
        <template slot-scope="scope">{{scope.row.first_name}}{{scope.row.last_name}}{{scope.row.nickname}}{{scope.row.mch_name}}</template>
      </el-table-column>
      <el-table-column prop="account" label="账号详情" min-width="180"></el-table-column>
      <el-table-column label="支付类型" min-width="150">
        <template slot-scope="scope"><span v-for="(item, index) in scope.row.pay_types" :key="index">{{payType[item]}}{{scope.row.pay_types.length===index+1?'':','}}</span></template>
      </el-table-column>
      <el-table-column prop="parent_name" label='所属总代' min-width="130">
        <template slot-scope="scope">{{scope.row.agency.parent.user_name}}</template>
      </el-table-column>
      <el-table-column label="展示条件" min-width="130">
          <template slot-scope="scope">{{UserLevel[scope.row.min_user_level]}}</template>
      </el-table-column>
      <el-table-column label="自助状态" min-width="100">
          <template slot-scope="scope"><span :style="!scope.row.auto_arrival?'color:red':''">{{scope.row.auto_arrival?'启用':'禁用'}}</span></template>
      </el-table-column>
      <el-table-column label="账号状态" min-width="100">
          <template slot-scope="scope"><span :style="!scope.row.status?'color:red':''">{{scope.row.status?'启用':'禁用'}}</span></template>
      </el-table-column>
        <el-table-column label="限额状态" min-width="100">
          <template slot-scope="scope"><span :style="scope.row.reached_daily_limit?'color:red':''">{{scope.row.reached_daily_limit?'已达成':'未达成'}}</span></template>
      </el-table-column>
        <el-table-column label="可用状态" min-width="100">
          <template slot-scope="scope"><span :style="!scope.row.available?'color:red':''">{{scope.row.available && !scope.row.reached_daily_limit ? '可用':'不可用'}}</span></template>
      </el-table-column>
      <el-table-column prop="created_at" label="创建时间" sortable min-width="180"></el-table-column>
      <el-table-column prop="updated_at" label="更新时间" sortable min-width="180"></el-table-column>
      <el-table-column label="操作" width="70" fixed="right">
        <template slot-scope="scope">
          <div>
            <el-button type="primary" size="mini" @click="update(scope.row)">编辑</el-button>
            <!-- <el-button type="danger" size="mini" @click="remove(scope.row)">删除</el-button>
            <el-button
              v-if="scope.row.status"
              type="warning"
              size="mini"
              @click="disable(scope.row,false)"
            >禁用</el-button>
            <el-button v-else type="primary" size="mini" @click="disable(scope.row,true)">启用</el-button> -->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="q.page_no"
        :page-sizes="$store.state.app.pageSizeArr"
        :page-size="q.page_size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="listData.total"
      ></el-pagination>
    </div>
    <qr-code v-if="showQrcode" :showDialog.sync="showQrcode" :infoModel="showModel"></qr-code>
    <save-update
      v-if="showUpdate"
      :showUpdate.sync="showUpdate"
      :id="show_id"
      :settleCycle="settleCycle"
    ></save-update>
  </div>
</template>

<script>
import saveUpdate from "./saveUpdate";
import {
  getAgencyReceiptList,
  deleteAgencyReceipt,
  disabledAgencyReceipt,getAgencyList
} from "@/api";
import qrCode from "./qrcode.vue";
import { queryFilter } from "@/utils/patch";

export default {
  components: { qrCode, saveUpdate },
  data() {
    return {
      listData: {},
      q: { page_size: 30, page_no: 1, pay_types: [] },
      listLoading: false,
      showUpdate: false,
      settleCycle: this.$store.state.app.settleCycle,
      show_id: null,
      PayMethodType: this.$store.state.app.PayMethodType,
      RecepiptMethodType: this.$store.state.app.RecepiptMethodType,
      payType: this.$store.state.app.payType,
      UserLevel: this.$store.state.app.UserLevel,
      RecepiptType: this.$store.state.app.RecepiptType,
      showQrcode: false,
      showModel: null,
      AgencyMainList: [],
      AgencyList: [],
    };
  },
  activated() {
    this.getList();
    this.getAgencyList()
    this.getChildAgencyList()
  },
  deactivated() {
    this.listLoading = false;
  },
  methods: {
    add() {
      this.show_id = null;
      this.showUpdate = true;
    },
    resetPwd(row) {
      this.$message.warning(row + "待开发");
    },
    update(row) {
      this.show_id = row.id;
      this.showUpdate = true;
    },
    disable(row, type) {
      let typeName = type ? "启用" : "禁用";
      this.$confirm(
        `确认${typeName}ID为${row.id}的收款账号？`,
        typeName + "收款账号",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          disabledAgencyReceipt({ status: type }, row.id).then(res => {
            if (res.status === 0) {
              this.$message({ type: "success", message: typeName + "成功!" });
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消" + typeName
          });
        });
    },
    remove(row) {
      this.$confirm(`确认删除ID为${row.id}的项么？`, "删除收款账号", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteAgencyReceipt(row.id).then(res => {
            if (res.status === 0) {
              this.$message({ type: "success", message: "删除成功!" });
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    query() {
      this.q = Object.assign(this.q, { page_no: 1, page_size: 30});
      this.$refs.saveChn.validate(valid => {
        if (valid) {
          this.getList();
        }
      });
    },
    reload() {
      this.q = { page_size: 30, page_no: 1, pay_types: [] };
      this.getList();
    },
    sortlist(sort) {
      this.q.$orderby = sort.prop;
      this.getList();
    },
    handleSizeChange(val) {
      this.q.page_size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.q.page_no = val;
      this.getList();
    },
    getList() {
      let queryobj = Object.assign({}, this.q, {pay_types: `[${this.q.pay_types}]`})
      if(this.q.max_accumulated_recharge)
      {
        queryobj=Object.assign(queryobj,{max_accumulated_recharge:this.q.max_accumulated_recharge*100})
      }
      if(this.q.min_accumulated_recharge)
      {
        queryobj=Object.assign(queryobj,{ min_accumulated_recharge:this.q.min_accumulated_recharge*100})
      }
      queryFilter(queryobj);
      getAgencyReceiptList(queryobj).then(res => {
        if (res.status === 0) {
          this.listLoading = false;
          this.listData = res.data;
        }
      });
    },
    getAgencyList () {
      getAgencyList({ agency_type: 2, page_size: 1000 }).then(res => {
        if (res.status === 0) {
          this.AgencyMainList = res.data.items
        }
      })
    },
    getChildAgencyList () {
      getAgencyList({ agency_type: 1, page_size: 1000 }).then(res => {
        if (res.status === 0) {
          this.AgencyList = res.data.items
        }
      })
    },
    showQR(obj) {
      this.showModel = obj;
      this.showQrcode = true;
    },
    showStr(obj) {
      let str = "";
      if ([1].includes(obj.receipt_method) && [1].includes(obj.pay_method)) {
        str = "支付宝账号" + obj.account;
      } else if ([2].includes(obj.pay_method)) {
        str = "吱口令" + obj.account;
      } else if ([5].includes(obj.receipt_method)) {
        str =
          "开户行" +
          this.$store.state.app.BankCode[obj.bank_code] +
          "卡号尾数" +
          obj.account.slice(-4);
      }
      return str;
    },
    getRecepiptMethodType(){
      if(!this.q.receipt_type)
      {
        return []
      }
      return this.RecepiptType.find((n)=>n.id===this.q.receipt_type).children
    },
  },
  watch: {
    showUpdate() {
        this.getList();
    },
    'q.receipt_type'(val, oldVal){
      if(val!=oldVal)
      {

          this.$set(this.q,'receipt_method',null)


      }
    }
  }
};
</script>
<style scoped>
.el-select{
  width: 158px
}
</style>
